<template>
  <div class="screen-head">
    <div class="logo-name">
      <img src="@/assets/images/img-name.png" @click="goHome"/>
    </div>
    <!--
      0： 管理员    1：灯具控制员   2：维护人员    3：游客

      管理员都有
      维修人员（2）只有照明系统管理
      灯控人员（1）只有照明系统管理
      游客（3）有报表管理（不能导出）

      -->
    <div class="top-right">
      <div class="sys-name" :class="{'on': idx == 1}" v-if="userInfo.role == 0" @click="goPage('userManagement', 1)">
        <i class="iconfont icon-user"></i>用户管理
      </div>
      <div class="sys-name" :class="{'on': idx == 2}" v-if="userInfo.role == 0 || userInfo.role == 3" @click="goPage('reportManagement', 2)">
        <i class="iconfont icon-echart"></i>报表管理
      </div>
      <div class="sys-name" :class="{'on': idx == 3}" v-if="userInfo.role == 1 || userInfo.role == 2" @click="goPage('sysManagement', 3)">
        <i class="iconfont icon-light"></i>照明系统管理
      </div>
      <div class="sys-name" :class="{'on': idx == 4}" v-if="userInfo.role == 0" @click="goPage('operationLog', 4)">
        <i class="iconfont icon-rizhi"></i>日志管理
      </div>
      <div class="sys-name" :class="{'on': idx == 5}" v-if="userInfo.role == 1 || userInfo.role == 2" @click="goPage('electricCurrent', 5)">
        <i class="iconfont icon-electrocardiogram"></i>三相电流
      </div>
      <div class="sys-name" :class="{'on': idx == 6}" v-if="userInfo.role == 1 || userInfo.role == 2" @click="goPage('currentReport', 6)">
        <i class="iconfont icon-electricCurrent"></i>电流报表
      </div>
      <div class="sys-name" :class="{'on': idx == 7}" v-if="userInfo.role == 2" @click="goPage('maintenanceReport', 7)">
        <i class="iconfont icon-repair"></i>维修报表
      </div>
      <div class="sys-name" :class="{'on': idx == 8}" v-if="userInfo.role == 2" @click="goPage('inspectionReport', 8)">
        <i class="iconfont icon-echart"></i>巡检报表
      </div>
      <div class="sys-name" :class="{'on': idx == 9}" v-if="userInfo.role == 0" @click="goPage('controlSwitchLight', 9)">
        <i class="iconfont icon-switch"></i>自动控制开关灯
      </div>
      <div class="sys-name" :class="{'on': idx == 10}" v-if="userInfo.role == 0 || userInfo.role == 2" @click="goPage('regionConfiguration', 10)">
        <i class="iconfont icon-setArea"></i>区域设置
      </div>
      <div class="sys-name" :class="{'on': idx == 11}" v-if="userInfo.role == 0" @click="goPage('energySavingReport', 11)">
        <i class="iconfont icon-light"></i>节能报表
      </div>
      <div class="sys-name" :class="{'on': idx == 12}" v-if="userInfo.role == 2" @click="goPage('nighttimeExpress', 12)">
        <i class="iconfont icon-light"></i>夜间快报
      </div>
      <div class="sys-name" :class="{'on': idx == 13}" v-if="userInfo.role == 0" @click="goPage('lampInformation', 13)">
        <i class="iconfont icon-light"></i>灯具信息
      </div>
<!--      <div class="sys-name" :class="{'on': idx == 10}" @click="goPage('controlLightsOff', 10)">
        <i class="iconfont icon-light"></i>自动控制熄灯
      </div>-->
      <div class="user-name">
        <img src="@/assets/images/img-icon12.svg" width="37"/>
        <div>你好{{ userName }}</div>
      </div>
      <div class="login-out" @click="loginOut">
        <img src="@/assets/images/img-icon10.svg" width="18"/>退出 <span>{{ date }}</span>
      </div>
    </div>

  </div>
</template>

<script>
import {getNowFormatDate, getNowFormatTIme} from "../../util/index.js";
import {mapGetters} from "vuex";

export default {
  name: "index",
  data() {
    return {
      date: '',
      idx: -1
    }
  },
  computed: {
    ...mapGetters(['topMenu','userInfo']),
    userName() {
      return localStorage.getItem('userName')
    }
  },
  watch:{
    'topMenu':{
      deep: true,
      handler(n){
        this.idx = JSON.parse(JSON.stringify(n));
      }
    }
  },
  created() {
    this.init();
    setInterval(() => {
      this.init()
    }, 1000 * 30)

    this.idx = JSON.parse(JSON.stringify(this.topMenu));
  },
  methods: {
    init(){
      let {ymdCH} = getNowFormatDate();
      let {hm} = getNowFormatTIme();
      this.date = ymdCH + ' ' + hm;
    },
    goPage(pathName, i) {
      this.idx = i;
      this.$store.commit('SET_TOPMENU', i)
      this.$store.commit('SET_CURRENTMENU', 0)
      this.$router.push('/' + pathName);
    },
    goHome(){
      this.$router.push('/');
      this.$store.commit('SET_TOPMENU', -1)
    },
    loginOut() {
      localStorage.removeItem('userName');
      this.$store.dispatch('SET_RESEAT');
      this.$router.push('/login')
    },
  }
}
</script>

<style scoped lang="scss">
.screen-head {
  height: 80px;
  //background: #182455 url("@/assets/images/img-top.png") no-repeat left top;
  background: url("@/assets/images/img-top.png") no-repeat left top;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 400;

  .logo-name {
    margin-left: 100px;
    text-align: center;

    img {
      cursor: pointer;
    }
  }

  .top-right {
    display: flex;
    color: #fff;
    padding-right: 30px;
    font-size: 20px;
    font-weight: 400;

    .iconfont {
      color: #3CBDFF;
      font-size: 20px;
      padding-right: 10px;
    }

    .sys-name {
      padding: 10px 16px;
      border-radius: 4px;
      margin-left: 6px;
      cursor: pointer;

      &.on, &:hover {
        background: linear-gradient(to bottom, #3CBDFF, #4E76CB);

        .iconfont {
          color: #fff;
        }
      }
    }

    .user-name {
      display: flex;
      align-items: center;
      padding: 0 30px 0 50px;

      img {
        vertical-align: bottom;
        margin-right: 10px;
      }
    }

    .login-out {
      line-height: 50px;
      border-left: 1px solid #3CBDFF;
      padding-left: 20px;
      cursor: pointer;

      img {
        margin-right: 10px;
      }
      span{
        margin-left: 28px;
      }
    }
  }
}

</style>
